<template>
  <div class="middel">
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">未结算数量</div>
          <div class="gn-card-content">
            <div>
              <CountTo :start-val="0" :end-val="Number(unsettledNum)" :duration="1000" class="card-panel-num" />
              <span>单</span>
            </div>
          </div>
        </div>
        <img src="@/assets/images/settlement1.png" class="h-[100%]" alt="" />
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">未结算金额</div>
          <div class="gn-card-content">
            <div>
              <CountTo class="card-panel-money" :endVal="Number(unsettledAmount)" :start-val="0" :duration="1000" :decimals="2" />
              <span> USD</span>
            </div>
          </div>
        </div>
        <img src="@/assets/images/settlement2.png" class="h-[40px] mb-1" alt="" />
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">已结算数量</div>
          <div class="gn-card-content">
            <div style="color: #f0ca43">
              <CountTo :start-val="0" :end-val="Number(settledNum)" :duration="1000" class="card-panel-num" />
              <span>单</span>
            </div>
          </div>
        </div>
        <img src="@/assets/images/settlement3.png" class="h-[100%]" alt="" />
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">已结算金额</div>
          <div class="gn-card-content">
            <div style="color: #f0ca43">
              <CountTo class="card-panel-money" :endVal="Number(settleddAmount)" :decimals="2" :decimal="'.'" />
              <span> USD</span>
            </div>
          </div>
        </div>
        <img src="@/assets/images/settlement4.png" class="h-[40px] mb-1" alt="" />
      </div>
    </el-col>
  </div>
</template>

<script>
import { CountTo } from 'vue3-count-to';
import { getUnSettToTal } from '@/api/pay/PaySettlement';
export default {
  components: { CountTo },
  props: {
    queryParams: {
      type: Object,
      default: () => ({})
    },
    monthQuery: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      unsettledAmount: 0,
      unsettledNum: 0,
      settleddAmount: 0,
      settledNum: 0
    };
  },
  methods: {
    async getUnSettToTalData() {
      if (!this.queryParams.dateList.length) {
        this.unsettledAmount = 0;
        this.unsettledNum = 0;
        this.settleddAmount = 0;
        this.settledNum = 0;
        return;
      }
      let res = await getUnSettToTal(this.queryParams);
      this.unsettledAmount = res.data.money_0;
      this.unsettledNum = res.data.num_0;
      this.settleddAmount = res.data.money_1;
      this.settledNum = res.data.num_1;
    }
  }
};
</script>

<style lang="scss" scoped>
.middel {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.card-panel-col {
  margin-bottom: 20px;
}
.card-panel {
  display: flex;
  flex-flow: nowrap;
  align-items: flex-end;
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  padding: 20px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.15);

  &:hover {
    .icon-people {
      background: #40c9c6;
    }

    .icon-message {
      background: #36a3f7;
    }
    .icon-shopping {
      opacity: 0.7;
    }
    .card-panel-icon {
      opacity: 0.7;
    }

    .icon-money {
      background: #f4516c;
    }
  }

  .icon-people {
    color: #40c9c6;
  }

  .icon-message {
    color: #36a3f7;
  }

  .icon-money {
    color: #f4516c;
  }

  .icon-shopping {
    color: #ffa56a;
  }
  .icon-shipping-true {
    color: #42bb4b;
  }

  .card-panel-icon-wrapper {
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    font-size: 48px;
  }

  .card-panel-description {
    flex: 1;
    font-weight: bold;
    margin: 0 26px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-block: 4px;

    .card-panel-text {
      line-height: 18px;
      color: #000;
      font-size: 20px;
    }

    .gn-card-content {
      display: flex;
      flex-flow: nowrap;
      justify-content: space-between;
      color: #0782ff;

      .card-panel-curency {
        font-size: 12px;
      }

      .card-panel-split {
        font-size: 30px;
        font-weight: bold;
        color: #00a0e9;
        padding: 0 10px;
      }

      .card-panel-money {
        font-size: 20px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
</style>
